<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SeeMyGo教育登录界面</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="box">
    <div id="header">
        <h1>SeeMyGo教育系统</h1>
    </div>
    <div class="centent">
        <input type="text" placeholder="请输入用户名/手机号">
        <input type="password" placeholder="请输入密码">
        <div class="setting">
        <a href=""><input type="checkbox">下次自动登录</a>
        <a href="#">忘记密码</a>
        </div>
        <button>登&nbsp&nbsp录</button>
        <p>还没账号?<a href="#" class="zc">立即注册</a></p>
    </div>
    <div class="footer">
        <span>社交账号登录:</span>
        <a href="#"><img src="images/sina.png" alt=""></a>
        <a href="#"><img src="images/weixin.png" alt=""></a>
        <a href="#"><img src="images/qq.png" alt=""></a>
    </div>
</div>

<script>
    window.onload = function(){
        var box = document.getElementById('box');
        var header = document.getElementById('header');

        header.onmousedown = function (event) {
            var Myevent = event || window.event;
                //box.offsetLef盒子中间位置到网页可视区域的最左端
                //box.offsetTop盒子中间位置到网页可视区域的最上端
            //这里的beginX  beginY 初始值相当于零，所以当后面onmousemove移动的时候相当于移动Myevent.clientX/Y的距离
            var beginX = Myevent.clientX-box.offsetLeft;
            var beginY = Myevent.clientY-box.offsetTop;
            document.onmousemove = function (event) {
                var Myevent = event || window.event;

                var movex = Myevent.clientX-beginX;
//                console.log(Myevent.clientX,beginX);
                var movey = Myevent.clientY-beginY;
                //从box的中心点开始算moveX的距离，
                if(movex<=box.offsetWidth/2){
                    movex = box.offsetWidth/2;
                }
//               取右最大距离？
                else if(movex>document.documentElement.clientWidth-box.offsetWidth/2){
                    movex =document.documentElement.clientWidth-box.offsetWidth/2;
                }
                //从box的中心点开始算moveY的距离，
                if(movey<=box.offsetWidth/2){
                    movey = box.offsetWidth/2;
                }else if(movey>document.documentElement.clientHeight-box.offsetWidth/2){
                    movey=document.documentElement.clientHeight-box.offsetWidth/2;
                }

                box.style.left = movex+'px';
                box.style.top = movey+'px';
                return false;
            };


        };

        document.onmouseup = function () {
            document.onmousedown = null;
            document.onmousemove = null;
            return false;
        }

    }
</script>
</body>
</html>